<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇幻幸运星</title>
    <style>
        :root {
            --primary-color: #9c27b0;
            --secondary-color: #673ab7;
            --tertiary-color: #3f51b5;
            --energy-color: #ffeb3b;
            --common-ticket: #4caf50;
            --premium-ticket: #ff9800;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            text-align: center;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
            padding: 20px;
            margin: 0;
            color: white;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
        }
        .starry-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(white, rgba(255,255,255,.2) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.3;
            z-index: -1;
        }
        .energy-bar {
            position: absolute;
            top: 15px;
            right: 15px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            font-size: 14px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .energy-icon {
            color: var(--energy-color);
            margin-right: 8px;
            font-size: 18px;
            text-shadow: 0 0 10px var(--energy-color);
        }
        .energy-count {
            font-weight: bold;
            color: var(--energy-color);
            text-shadow: 0 0 5px var(--energy-color);
        }
        .lottery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin: 40px auto;
            width: 350px;
        }
        .lottery-item {
            height: 110px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            color: white;
            background: linear-gradient(135deg, var(--item-color-1) 0%, var(--item-color-2) 100%);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .lottery-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
        }
        .lottery-item.active {
            transform: scale(0.95);
            box-shadow: 0 0 25px var(--item-glow);
            animation: pulse 1s infinite alternate;
            z-index: 10;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 15px var(--item-glow); }
            100% { box-shadow: 0 0 30px var(--item-glow); }
        }
        .prize-symbol {
            font-size: 40px;
            margin-bottom: 8px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
        }
        .prize-name {
            font-size: 14px;
            background: rgba(0,0,0,0.4);
            padding: 3px 8px;
            border-radius: 10px;
        }
        .btn-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 25px;
            flex-wrap: wrap;
        }
        .btn {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            border: none;
            padding: 14px 25px;
            font-size: 16px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
            font-weight: bold;
            letter-spacing: 1px;
            position: relative;
            overflow: hidden;
            flex: 1;
            min-width: 160px;
            max-width: 180px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .btn-energy {
            background: linear-gradient(135deg, var(--energy-color) 0%, #fbc02d 100%);
            box-shadow: 0 4px 15px rgba(255, 235, 59, 0.4);
            color: #333;
        }
        .btn-secondary {
            background: linear-gradient(135deg, var(--secondary-color) 0%, var(--tertiary-color) 100%);
            box-shadow: 0 4px 15px rgba(103, 58, 183, 0.4);
        }
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(156, 39, 176, 0.6);
        }
        .btn-energy:hover {
            box-shadow: 0 6px 25px rgba(255, 235, 59, 0.6);
        }
        .btn-secondary:hover {
            box-shadow: 0 6px 25px rgba(103, 58, 183, 0.6);
        }
        .btn:disabled {
            background: linear-gradient(135deg, #555 0%, #333 100%);
            transform: none;
            box-shadow: none;
            cursor: not-allowed;
            opacity: 0.7;
        }
        .title {
            color: white;
            margin-bottom: 25px;
            font-size: 32px;
            font-weight: bold;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
            position: relative;
            display: inline-block;
            background: linear-gradient(90deg, #ff4081, #9c27b0, #3f51b5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            padding-bottom: 10px;
        }
        .title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 25%;
            width: 50%;
            height: 3px;
            background: linear-gradient(90deg, #ff4081, #9c27b0, #3f51b5);
            border-radius: 3px;
        }
        .attempts-counter {
            margin-top: 15px;
            font-size: 16px;
            color: rgba(255,255,255,0.8);
        }
        .attempts-count {
            font-weight: bold;
            color: var(--energy-color);
            font-size: 18px;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }
        .modal-content {
            background: linear-gradient(135deg, rgba(30,30,40,0.95) 0%, rgba(20,20,30,0.95) 100%);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 450px;
            width: 90%;
            animation: popup 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.2);
            max-height: 80vh;
            overflow-y: auto;
        }
        @keyframes popup {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        .modal-symbol {
            font-size: 70px;
            margin: 20px auto;
            width: 120px;
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--modal-color-1) 0%, var(--modal-color-2) 100%);
            color: white;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        .modal-title {
            font-size: 28px;
            font-weight: bold;
            margin: 15px 0;
            background: linear-gradient(90deg, #ff4081, #9c27b0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .modal-prize {
            font-size: 24px;
            color: var(--modal-text-color);
            margin: 15px 0;
            font-weight: bold;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }
        .energy-gained {
            color: var(--energy-color);
            font-weight: bold;
            margin: 15px 0;
            font-size: 20px;
            text-shadow: 0 0 10px var(--energy-color);
        }
        .modal-btns {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin-top: 25px;
        }
        .modal-btn {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            border: none;
            padding: 12px 25px;
            font-size: 16px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
            box-shadow: 0 4px 15px rgba(156, 39, 176, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.3);
            flex: 1;
        }
        .modal-btn-energy {
            background: linear-gradient(135deg, var(--energy-color) 0%, #fbc02d 100%);
            box-shadow: 0 4px 15px rgba(255, 235, 59, 0.4);
            color: #333;
        }
        .modal-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(156, 39, 176, 0.6);
        }
        .modal-btn-energy:hover {
            box-shadow: 0 6px 25px rgba(255, 235, 59, 0.6);
        }
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            font-size: 28px;
            cursor: pointer;
            color: rgba(255,255,255,0.7);
            transition: all 0.3s;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        .close-btn:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }
        
        /* 中奖记录样式 */
        .record-list {
            text-align: left;
            margin-top: 20px;
            max-height: 300px;
            overflow-y: auto;
            padding-right: 10px;
        }
        .record-item {
            display: flex;
            align-items: center;
            padding: 15px;
            margin-bottom: 12px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            transition: all 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .record-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateX(5px);
        }
        .record-symbol {
            font-size: 28px;
            margin-right: 15px;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--record-color-1) 0%, var(--record-color-2) 100%);
            color: white;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .record-info {
            flex: 1;
        }
        .record-name {
            font-weight: bold;
            margin-bottom: 5px;
            color: white;
            font-size: 16px;
        }
        .record-details {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .record-time {
            font-size: 12px;
            color: rgba(255,255,255,0.6);
        }
        .record-energy {
            font-size: 14px;
            color: var(--energy-color);
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        .record-energy::before {
            content: '⚡';
            margin-right: 3px;
        }
        .no-records {
            color: rgba(255,255,255,0.6);
            font-style: italic;
            padding: 30px 0;
            font-size: 16px;
        }
        
        /* 能量商店弹窗 */
        .energy-shop {
            margin-top: 20px;
        }
        .energy-option {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            margin-bottom: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            transition: all 0.3s;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .energy-option:hover {
            background: rgba(255, 255, 255, 0.1);
        }
        .energy-option-info {
            text-align: left;
            flex: 1;
        }
        .energy-option-title {
            font-weight: bold;
            margin-bottom: 5px;
            color: white;
        }
        .energy-option-desc {
            font-size: 13px;
            color: rgba(255,255,255,0.7);
        }
        .energy-cost {
            color: var(--energy-color);
            font-weight: bold;
            display: flex;
            align-items: center;
            font-size: 18px;
            margin-left: 15px;
        }
        .energy-cost::before {
            content: '⚡';
            margin-right: 3px;
            font-size: 16px;
        }
        .ticket-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: bold;
            margin-left: 8px;
        }
        .common-ticket {
            background-color: var(--common-ticket);
            color: white;
        }
        .premium-ticket {
            background-color: var(--premium-ticket);
            color: white;
        }
        .inventory {
            margin-top: 25px;
            padding: 15px;
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .inventory-title {
            font-weight: bold;
            margin-bottom: 10px;
            color: rgba(255,255,255,0.8);
        }
        .inventory-items {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        .inventory-item {
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        .ticket-count {
            margin-left: 5px;
            background: rgba(0,0,0,0.3);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="starry-bg"></div>
        
        <div class="energy-bar">
            <span class="energy-icon">⚡</span>
            <span class="energy-count" id="energyCount">0</span>
        </div>
        
        <h1 class="title">奇幻幸运星</h1>
        
        <div class="attempts-counter">
            今日剩余抽奖次数: <span class="attempts-count" id="remainingAttempts">5</span>
        </div>
        
        <div class="lottery-grid" id="lotteryGrid">
            <!-- 奖品格子将通过JS动态生成 -->
        </div>
        
        <div class="btn-group">
            <button class="btn" id="startBtn">召唤幸运星</button>
            <button class="btn btn-secondary" id="viewRecordsBtn">星辰记录</button>
            <button class="btn btn-energy" id="energyShopBtn">星能商店</button>
        </div>
    </div>

    <!-- 抽奖结果弹窗 -->
    <div class="modal" id="resultModal">
        <div class="modal-content">
            <span class="close-btn" id="closeResultModal">&times;</span>
            <div id="modalResult"></div>
            <div class="modal-symbol" id="modalSymbol"></div>
            <div class="modal-title" id="modalTitle">星辰赐福！</div>
            <div class="modal-prize" id="modalPrize"></div>
            <div class="energy-gained" id="energyGained"></div>
            <div class="modal-btns">
                <button class="modal-btn" id="confirmBtn">确定</button>
                <button class="modal-btn modal-btn-energy" id="usePremiumBtn">使用高级星能券</button>
            </div>
        </div>
    </div>

    <!-- 中奖记录弹窗 -->
    <div class="modal" id="recordsModal">
        <div class="modal-content">
            <span class="close-btn" id="closeRecordsModal">&times;</span>
            <div class="modal-title">星辰记录</div>
            <div class="record-list" id="recordList">
                <!-- 中奖记录将通过JS动态生成 -->
            </div>
            <button class="modal-btn" id="closeRecordsBtn">返回</button>
        </div>
    </div>

    <!-- 能量商店弹窗 -->
    <div class="modal" id="shopModal">
        <div class="modal-content">
            <span class="close-btn" id="closeShopModal">&times;</span>
            <div class="modal-title">星能商店</div>
            <div class="energy-shop">
                <div class="energy-option">
                    <div class="energy-option-info">
                        <div class="energy-option-title">普通星能券 <span class="ticket-badge common-ticket">中奖率+15%</span></div>
                        <div class="energy-option-desc">使用后下次抽奖中奖概率提升15%</div>
                    </div>
                    <button class="energy-cost" id="buyCommonBtn">15</button>
                </div>
                <div class="energy-option">
                    <div class="energy-option-info">
                        <div class="energy-option-title">高级星能券 <span class="ticket-badge premium-ticket">必中大奖</span></div>
                        <div class="energy-option-desc">使用后下次抽奖必定获得前4等奖</div>
                    </div>
                    <button class="energy-cost" id="buyPremiumBtn">25</button>
                </div>
            </div>
            <div class="inventory">
                <div class="inventory-title">我的星能券</div>
                <div class="inventory-items">
                    <div class="inventory-item" style="background-color: var(--common-ticket);">
                        普通券 <span class="ticket-count" id="commonTicketCount">0</span>
                    </div>
                    <div class="inventory-item" style="background-color: var(--premium-ticket);">
                        高级券 <span class="ticket-count" id="premiumTicketCount">0</span>
                    </div>
                </div>
            </div>
            <button class="modal-btn" id="closeShopBtn">返回</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 奖品数据
            const prizes = [
                { 
                    id: 1, 
                    name: "星辰宝石", 
                    symbol: "💎",
                    color1: "#FF416C",
                    color2: "#FF4B2B",
                    glow: "rgba(255, 75, 43, 0.7)",
                    energy: 10
                },
                { 
                    id: 2, 
                    name: "月光护符", 
                    symbol: "🌙",
                    color1: "#7F00FF",
                    color2: "#E100FF",
                    glow: "rgba(225, 0, 255, 0.7)",
                    energy: 8
                },
                { 
                    id: 3, 
                    name: "太阳徽章", 
                    symbol: "☀️",
                    color1: "#00c6ff",
                    color2: "#0072ff",
                    glow: "rgba(0, 114, 255, 0.7)",
                    energy: 6
                },
                { 
                    id: 4, 
                    name: "银河之泪", 
                    symbol: "🌌",
                    color1: "#f46b45",
                    color2: "#eea849",
                    glow: "rgba(238, 168, 73, 0.7)",
                    energy: 5
                },
                { 
                    id: 5, 
                    name: "幸运四叶草", 
                    symbol: "🍀",
                    color1: "#6a11cb",
                    color2: "#2575fc",
                    glow: "rgba(37, 117, 252, 0.7)",
                    energy: 4
                },
                { 
                    id: 6, 
                    name: "星尘粉末", 
                    symbol: "✨",
                    color1: "#11998e",
                    color2: "#38ef7d",
                    glow: "rgba(56, 239, 125, 0.7)",
                    energy: 3
                },
                { 
                    id: 7, 
                    name: "彩虹碎片", 
                    symbol: "🌈",
                    color1: "#fc4a1a",
                    color2: "#f7b733",
                    glow: "rgba(247, 183, 51, 0.7)",
                    energy: 2
                },
                { 
                    id: 8, 
                    name: "许愿星砂", 
                    symbol: "⭐",
                    color1: "#FF0099",
                    color2: "#493240",
                    glow: "rgba(255, 0, 153, 0.7)",
                    energy: 1
                },
                { 
                    id: 9, 
                    name: "星云迷雾", 
                    symbol: "🌫️",
                    color1: "#606c88",
                    color2: "#3f4c6b",
                    glow: "rgba(63, 76, 107, 0.7)",
                    textColor: "#fff",
                    energy: 1
                }
            ];
            
            // DOM元素
            const lotteryGrid = document.getElementById('lotteryGrid');
            const startBtn = document.getElementById('startBtn');
            const viewRecordsBtn = document.getElementById('viewRecordsBtn');
            const energyShopBtn = document.getElementById('energyShopBtn');
            const resultModal = document.getElementById('resultModal');
            const recordsModal = document.getElementById('recordsModal');
            const shopModal = document.getElementById('shopModal');
            const modalResult = document.getElementById('modalResult');
            const modalSymbol = document.getElementById('modalSymbol');
            const modalTitle = document.getElementById('modalTitle');
            const modalPrize = document.getElementById('modalPrize');
            const energyGained = document.getElementById('energyGained');
            const recordList = document.getElementById('recordList');
            const closeResultModal = document.getElementById('closeResultModal');
            const closeRecordsModal = document.getElementById('closeRecordsModal');
            const closeShopModal = document.getElementById('closeShopModal');
            const confirmBtn = document.getElementById('confirmBtn');
            const usePremiumBtn = document.getElementById('usePremiumBtn');
            const closeRecordsBtn = document.getElementById('closeRecordsBtn');
            const closeShopBtn = document.getElementById('closeShopBtn');
            const buyCommonBtn = document.getElementById('buyCommonBtn');
            const buyPremiumBtn = document.getElementById('buyPremiumBtn');
            const energyCount = document.getElementById('energyCount');
            const remainingAttempts = document.getElementById('remainingAttempts');
            const commonTicketCount = document.getElementById('commonTicketCount');
            const premiumTicketCount = document.getElementById('premiumTicketCount');
            
            // 状态变量
            let isRolling = false;
            let currentIndex = 0;
            let rollInterval;
            let rollSpeed = 100;
            let stopTimeout;
            let maxAttempts = 5;
            let baseWinProbability = 0.7; // 基础中奖概率
            let currentWinProbability = baseWinProbability;
            let premiumTicketActive = false;
            let commonTicketActive = false;
            
            // 用户数据
            let userData = JSON.parse(localStorage.getItem('starLotteryData')) || {
                energy: 0,
                attempts: maxAttempts,
                records: [],
                lastPlayDate: null,
                commonTickets: 0,
                premiumTickets: 0
            };
            
            // 初始化 - 检查是否是新的一天
            function initUserData() {
                const today = new Date().toDateString();
                if (userData.lastPlayDate !== today) {
                    // 新的一天重置抽奖次数
                    userData.attempts = maxAttempts;
                    userData.lastPlayDate = today;
                    saveUserData();
                }
                updateUI();
            }
            
            // 保存用户数据
            function saveUserData() {
                localStorage.setItem('starLotteryData', JSON.stringify(userData));
            }
            
            // 更新UI
            function updateUI() {
                energyCount.textContent = userData.energy;
                remainingAttempts.textContent = userData.attempts;
                commonTicketCount.textContent = userData.commonTickets;
                premiumTicketCount.textContent = userData.premiumTickets;
                
                // 更新按钮状态
                startBtn.disabled = isRolling || userData.attempts <= 0;
                viewRecordsBtn.disabled = isRolling;
                energyShopBtn.disabled = isRolling;
                
                if (userData.attempts <= 0) {
                    startBtn.textContent = "今日次数已用完";
                } else {
                    startBtn.textContent = "召唤幸运星";
                }
                
                // 根据库存显示使用高级券按钮
                if (userData.premiumTickets > 0) {
                    usePremiumBtn.style.display = 'block';
                } else {
                    usePremiumBtn.style.display = 'none';
                }
            }
            
            // 初始化九宫格
            function initGrid() {
                lotteryGrid.innerHTML = '';
                prizes.forEach((prize, index) => {
                    const item = document.createElement('div');
                    item.className = 'lottery-item';
                    item.dataset.index = index;
                    
                    // 设置CSS变量用于渐变背景
                    item.style.setProperty('--item-color-1', prize.color1);
                    item.style.setProperty('--item-color-2', prize.color2);
                    item.style.setProperty('--item-glow', prize.glow);
                    
                    const symbol = document.createElement('div');
                    symbol.className = 'prize-symbol';
                    symbol.textContent = prize.symbol;
                    
                    const name = document.createElement('div');
                    name.className = 'prize-name';
                    name.textContent = prize.name;
                    
                    item.appendChild(symbol);
                    item.appendChild(name);
                    lotteryGrid.appendChild(item);
                });
            }
            
            // 开始抽奖
            function startLottery() {
                if (isRolling || userData.attempts <= 0) return;
                
                isRolling = true;
                updateUI();
                
                // 重置所有格子状态
                document.querySelectorAll('.lottery-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 开始滚动
                rollSpeed = 100;
                rollInterval = setInterval(roll, rollSpeed);
                
                // 随机决定停止时间(3-6秒后)
                const stopTime = 3000 + Math.random() * 3000;
                stopTimeout = setTimeout(stopLottery, stopTime);
            }
            
            // 滚动效果
            function roll() {
                // 移除上一个高亮
                document.querySelector('.lottery-item.active')?.classList.remove('active');
                
                // 移动到下一个格子
                currentIndex = (currentIndex + 1) % prizes.length;
                const currentItem = document.querySelector(`.lottery-item[data-index="${currentIndex}"]`);
                currentItem.classList.add('active');
                
                // 逐渐减慢速度
                if (rollSpeed < 300) {
                    rollSpeed += 10;
                    clearInterval(rollInterval);
                    rollInterval = setInterval(roll, rollSpeed);
                }
            }
            
            // 停止抽奖
            function stopLottery() {
                clearInterval(rollInterval);
                clearTimeout(stopTimeout);
                
                // 决定最终结果
                let finalIndex;
                
                // 如果有高级券激活，则必中前4等奖
                if (premiumTicketActive) {
                    finalIndex = Math.floor(Math.random() * 4);
                    userData.premiumTickets--;
                    premiumTicketActive = false;
                } 
                // 如果有普通券激活，则增加中奖概率
                else if (commonTicketActive) {
                    const randomValue = Math.random();
                    if (randomValue < currentWinProbability + 0.15) {
                        finalIndex = Math.floor(Math.random() * 8);
                    } else {
                        finalIndex = 8;
                    }
                    userData.commonTickets--;
                    commonTicketActive = false;
                } 
                // 正常抽奖
                else {
                    const randomValue = Math.random();
                    if (randomValue < currentWinProbability) {
                        finalIndex = Math.floor(Math.random() * 8);
                    } else {
                        finalIndex = 8;
                    }
                    // 只在正常抽奖时减少次数
                    userData.attempts--;
                }
                
                // 确保停在选中的奖品上
                document.querySelector('.lottery-item.active')?.classList.remove('active');
                currentIndex = finalIndex;
                document.querySelector(`.lottery-item[data-index="${currentIndex}"]`).classList.add('active');
                
                // 显示结果弹窗
                setTimeout(() => {
                    const finalPrize = prizes[finalIndex];
                    
                    // 获得幸运能量
                    const gainedEnergy = finalPrize.energy;
                    userData.energy += gainedEnergy;
                    
                    // 如果不是"星云迷雾"，则添加到中奖记录
                    if (finalIndex !== 8) {
                        addWinRecord(finalPrize, gainedEnergy);
                    }
                    
                    showResultModal(finalPrize, gainedEnergy);
                    saveUserData();
                    
                    // 抽奖结束后重置状态
                    isRolling = false;
                    rollSpeed = 100;
                    updateUI();
                }, 500);
            }
            
            // 添加到中奖记录
            function addWinRecord(prize, energy) {
                const newRecord = {
                    prize: prize,
                    time: new Date().toLocaleString(),
                    energy: energy
                };
                userData.records.unshift(newRecord);
            }
            
            // 显示抽奖结果弹窗
            function showResultModal(prize, energy) {
                modalSymbol.textContent = prize.symbol;
                modalSymbol.style.setProperty('--modal-color-1', prize.color1);
                modalSymbol.style.setProperty('--modal-color-2', prize.color2);
                
                if (prize.id === 9) {
                    modalTitle.textContent = "星辰黯淡";
                    modalResult.innerHTML = "本次未能获得星辰赐福";
                    modalPrize.textContent = prize.name;
                    modalPrize.style.setProperty('--modal-text-color', 'rgba(255,255,255,0.7)');
                } else {
                    modalTitle.textContent = "星辰赐福！";
                    modalResult.innerHTML = "你获得了以下星辰宝物";
                    modalPrize.textContent = prize.name;
                    modalPrize.style.setProperty('--modal-text-color', prize.color1);
                }
                
                energyGained.innerHTML = `获得 <span style="color: var(--energy-color); font-weight: bold; text-shadow: 0 0 10px var(--energy-color);">+${energy}⚡</span> 星能`;
                
                resultModal.style.display = "flex";
            }
            
            // 使用高级星能券
            function usePremiumTicket() {
                if (userData.premiumTickets > 0) {
                    premiumTicketActive = true;
                    closeModal(resultModal);
                    alert('高级星能券已激活！下次抽奖必得前4等奖！');
                    saveUserData();
                    updateUI();
                } else {
                    alert('没有高级星能券！');
                }
            }
            
            // 购买普通星能券
            function buyCommonTicket() {
                if (userData.energy >= 15) {
                    userData.energy -= 15;
                    userData.commonTickets++;
                    saveUserData();
                    updateUI();
                    alert('成功兑换普通星能券！');
                } else {
                    alert('星能不足！');
                }
            }
            
            // 购买高级星能券
            function buyPremiumTicket() {
                if (userData.energy >= 25) {
                    userData.energy -= 25;
                    userData.premiumTickets++;
                    saveUserData();
                    updateUI();
                    alert('成功兑换高级星能券！');
                } else {
                    alert('星能不足！');
                }
            }
            
            // 显示中奖记录弹窗
            function showRecordsModal() {
                recordList.innerHTML = '';
                
                if (userData.records.length === 0) {
                    recordList.innerHTML = '<div class="no-records">暂无星辰记录</div>';
                } else {
                    userData.records.forEach(record => {
                        const recordItem = document.createElement('div');
                        recordItem.className = 'record-item';
                        
                        const symbol = document.createElement('div');
                        symbol.className = 'record-symbol';
                        symbol.textContent = record.prize.symbol;
                        symbol.style.setProperty('--record-color-1', record.prize.color1);
                        symbol.style.setProperty('--record-color-2', record.prize.color2);
                        
                        const info = document.createElement('div');
                        info.className = 'record-info';
                        
                        const name = document.createElement('div');
                        name.className = 'record-name';
                        name.textContent = record.prize.name;
                        
                        const details = document.createElement('div');
                        details.className = 'record-details';
                        
                        const time = document.createElement('div');
                        time.className = 'record-time';
                        time.textContent = record.time;
                        
                        const energy = document.createElement('div');
                        energy.className = 'record-energy';
                        energy.textContent = record.energy;
                        
                        details.appendChild(time);
                        details.appendChild(energy);
                        
                        info.appendChild(name);
                        info.appendChild(details);
                        
                        recordItem.appendChild(symbol);
                        recordItem.appendChild(info);
                        
                        recordList.appendChild(recordItem);
                    });
                }
                
                recordsModal.style.display = "flex";
            }
            
            // 显示能量商店弹窗
            function showShopModal() {
                shopModal.style.display = "flex";
            }
            
            // 关闭弹窗
            function closeModal(modal) {
                modal.style.display = "none";
            }
            
            // 事件监听
            startBtn.addEventListener('click', startLottery);
            viewRecordsBtn.addEventListener('click', showRecordsModal);
            energyShopBtn.addEventListener('click', showShopModal);
            
            closeResultModal.addEventListener('click', () => closeModal(resultModal));
            closeRecordsModal.addEventListener('click', () => closeModal(recordsModal));
            closeShopModal.addEventListener('click', () => closeModal(shopModal));
            confirmBtn.addEventListener('click', () => closeModal(resultModal));
            usePremiumBtn.addEventListener('click', usePremiumTicket);
            closeRecordsBtn.addEventListener('click', () => closeModal(recordsModal));
            closeShopBtn.addEventListener('click', () => closeModal(shopModal));
            buyCommonBtn.addEventListener('click', buyCommonTicket);
            buyPremiumBtn.addEventListener('click', buyPremiumTicket);
            
            // 点击弹窗外部关闭
            window.addEventListener('click', function(event) {
                if (event.target === resultModal) {
                    closeModal(resultModal);
                }
                if (event.target === recordsModal) {
                    closeModal(recordsModal);
                }
                if (event.target === shopModal) {
                    closeModal(shopModal);
                }
            });
            
            // 初始化
            initGrid();
            initUserData();
        });
    </script>
</body>
</html>